{layout name="layout" /}

<div class="Hui-article">
    <article class="cl pd-20">
        <form action="" method="post" class="form form-horizontal" id="form-category-add">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    <span class="c-red">*</span>&nbsp;&nbsp;&nbsp;栏&nbsp;&nbsp;&nbsp;目&nbsp;：</label>
                <div class="formControls col-xs-8 col-sm-2">
                    <span class="select-box">
                        <select class="select" id="sel_Sub" name="cid">
                            <option value="0" {eq name="cid" value="0" }selected{/eq}>--请选择栏目--</option>
                            {foreach $categories as $value}
                            <option value="{$value.id}" {eq name="cid" value="$value.id" }selected{/eq}> {$value.name}</option>
                            {notempty name="value.child"} {foreach $value.child as $val}
                            <option value="{$val.id}" {eq name="cid" value="$val.id" }selected{/eq}>&nbsp;&nbsp;├ {$val.name}</option>
                            {notempty name="val.child"} {foreach $val.child as $v}
                            <option value="{$v.id}" {eq name="cid" value="$v.id" }selected{/eq}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┕ {$v.name}</option>
                            {/foreach} {/notempty} {/foreach} {/notempty} {/foreach}
                        </select>
                    </span>
                </div>
                <!-- <label class="form-label col-xs-4 col-sm-2">
                    <span class="c-red">*</span>文章模板：</label>
                <div class="formControls col-xs-8 col-sm-2">
                    <span class="select-box">
                        <select class="select" id="sel_Sub" name="tpl_id">
                            <option value="0">请选择模板</option>

                        </select>
                    </span>
                    <span class="c-red">(不选则为默认模板)</span>
                </div> -->
                <div class="col-3"> </div>
            </div>
            <!-- 文章标题 -->
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    <span class="c-red">*</span>文章标题：</label>
                <div class="formControls col-xs-8 col-sm-4">
                    <input type="text" class="input-text" value="" placeholder="文章标题,不超过100个字符" id="title" name="title">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">&nbsp;作&nbsp;&nbsp;者&nbsp;：</label>
                <div class="formControls col-xs-8 col-sm-2">
                    <input type="text" class="input-text" value="" placeholder="不填写则为当前登陆账号" id="writer" name="writer">
                </div>
                <label class="form-label col-xs-4 col-sm-2">文章来源：</label>
                <div class="formControls col-xs-8 col-sm-2">
                    <input type="text" class="input-text" value="" placeholder="不填写则为默认原创" id="source" name="source">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"> 排&nbsp; 序 ：</label>
                <div class="formControls col-xs-8 col-sm-2">
                    <input type="text" class="input-text" value="" name="sort" style="width:60px;">
                </div>
                <span class="c-red">* 数值越小,排序越靠前</span>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">&nbsp;关键字&nbsp;：</label>
                <div class="formControls col-xs-8 col-sm-5">
                    <input type="text" class="input-text" value="" placeholder="多个关键字用英文半角逗号(,)隔开" id="keywords" name="keywords">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">简 述：</label>
                <div class="formControls col-xs-8 col-sm-5">
                    <textarea name="description" cols="" rows="" class="textarea" placeholder="说点什么...最多输入200个字符" datatype="*10-100" dragonfly="true"
                        nullmsg="备注不能为空！" onKeyUp="textarealength(this,200)"></textarea>
                    <p class="textarea-numberbar">
                        <em class="textarea-length">0</em>/200</p>
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    <span class="c-red">* </span>缩略图：</label>
                <div class="formControls col-xs-8 col-sm-4">
                    <input type="text" class="input-text" value="" id="thumb" name="thumb" placeholder="缩略图地址, 可以是网络图片, 大小不要超过40kb">
                </div>
                <div class="formControls col-xs-8 col-sm-1">
                    <a href="javascript:;" class="btn btn-primary radius" onClick="addthumb()">
                        <i class="Hui-iconfont">&#xe600;</i>添加缩略图</a>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    <span class="c-red">* </span>文章内容：</label>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-1"></label>
                <div class="formControls col-xs-8 col-sm-9">
                    <script id="editor" type="text/plain" style="width:100%;height:400px;">此处输入文章正文...</script>
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"> 选&nbsp; 项 ：</label>
                <div class="formControls col-xs-8 col-sm-2 skin-minimal">
                    <input name="top" type="radio" id="sex-1" value="1">
                    <label for="sex-1">推荐</label>
                    <input name="top" type="radio" id="sex-2" value="2">
                    <label for="sex-2">不推荐</label>
                </div>
                <!-- <div class="formControls col-xs-8 col-sm-2 skin-minimal">
                    <input name="discussed" type="radio" id="diss-1" value="1">
                    <label for="diss-1">开启评论</label>
                    <input name="discussed" type="radio" id="diss-2" value="2">
                    <label for="diss-2">禁止评论</label>
                </div> -->
                <!-- <div class="formControls col-xs-8 col-sm-2 skin-minimal">
                    <input name="ishome" type="radio" id="sex-1" value="1">
                    <label for="sex-1">生成HTML</label>
                    <input name="ishome" type="radio" id="sex-2" value="0">
                    <label for="sex-2">不生成HTML</label>
                </div> -->
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                    <button class="btn btn-primary radius" type="submit">
                        <i class="Hui-iconfont">&#xe632;</i> 保存提交</button>
                    <button type="button" class="btn btn-default radius" onClick="window.history.back();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                </div>
            </div>
        </form>
    </article>
</div>


<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/static/h-ui/lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="/static/h-ui/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
<script type="text/javascript" src="/static/h-ui/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    $(function () {
        //实例化编辑器   
        var ue = UE.getEditor('editor');

        //提交表单
        $("#form-category-add").submit(function () {
            var note = $("#description").val();

            if (!$("#sel_Sub").val()) {
                layer.msg('栏目不能为空!', {
                    icon: 5,
                    time: 1000
                });
                return false;
            }

            if (!$("#title").val()) {
                layer.msg('标题不能为空!', {
                    icon: 5,
                    time: 1000
                });
                return false;
            }

            if (getblen(note) > 200) {
                layer.msg('备注过长', {
                    icon: 5,
                    time: 1000
                });
                return false;
            }
        })
    });

    function textarealength(obj, toplength) {
        var note = $(obj).val();
        var blen = getblen(note);

        if (blen <= toplength) {
            $(".textarea-length").html(blen);
        } else {
            $(".textarea-length").css('color', 'red');
            $(".textarea-length").html(blen);
        }
    }
    //获取textarea字符长度，中文单字2字符，英文1字符
    function getblen(str) {
        var l = str.length;
        var blen = 0;

        for (i = 0; i < l; i++) {
            if ((str.charCodeAt(i) & 0xff00) != 0) {
                blen++;
            }
            blen++;
        }

        return blen;
    }

    //添加缩略图
    function addthumb() {
        layer.open({
            type: 2,
            area: ['700px', '500px'],
            fix: false, //不固定
            maxmin: true,
            shade: 0.4,
            title: '添加缩略图',
            content: '{:url("file_manager/addThumb")}'
        });
    }
</script>
<!--请在上方写此页面业务相关的脚本-->

</body>

</html>